<template>
  <div class="bottom-nav" :class="{ 'has-safe-area': hasSafeArea }">
    <router-link
      v-for="(item, index) in navItems"
      :key="index"
      :to="item.route || item.path"
      class="nav-item"
      :class="{ active: isActive(item) }"
    >
      <div class="nav-icon">
        <i class="fas" :class="[isActive(item) ? item.activeIcon : item.icon]"></i>
      </div>
      <div class="nav-text">{{ item.text }}</div>
    </router-link>
  </div>
</template>

<script>
export default {
  name: 'BottomNav',
  props: {
    navItems: {
      type: Array,
      default: () => {
        // 检查是否使用新版
        const useNewVersion = localStorage.getItem('useNewVersion') === 'true';
        
        if (useNewVersion) {
          return [
            {
              path: '/new/home',
              text: '首页',
              icon: 'fa-home',
              activeIcon: 'fa-home'
            },
            {
              path: '/new/apps',
              text: '应用',
              icon: 'fa-th-large',
              activeIcon: 'fa-th-large'
            },
            {
              path: '/new/profile',
              text: '我的',
              icon: 'fa-user',
              activeIcon: 'fa-user'
            }
          ];
        } else {
          return [
            {
              path: '/',
              text: '首页',
              icon: 'fa-home',
              activeIcon: 'fa-home'
            },
            {
              path: '/apps',
              text: '应用',
              icon: 'fa-th-large',
              activeIcon: 'fa-th-large'
            },
            {
              path: '/profile',
              text: '我的',
              icon: 'fa-user',
              activeIcon: 'fa-user'
            }
          ];
        }
      }
    },
    matchPattern: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      hasSafeArea: false
    }
  },
  mounted() {
    // 检测是否有安全区域（iPhone X及以上）
    this.checkSafeArea()
    
    // 监听版本变化
    window.addEventListener('storage', this.handleStorageChange)
    
    // 监听路由变化，以便更新激活状态
    this.$watch(
      () => this.$route.path,
      () => {
        this.$forceUpdate()
      }
    )
  },
  beforeUnmount() {
    // 移除存储事件监听器
    window.removeEventListener('storage', this.handleStorageChange)
  },
  methods: {
    // 处理本地存储变化
    handleStorageChange(event) {
      if (event.key === 'useNewVersion') {
        this.$forceUpdate() // 强制重新渲染导航栏
      }
    },
    // 检查路由是否激活
    isActive(item) {
      const currentPath = this.$route.path;
      
      // 特殊处理从/user到/profile的重定向
      if (item.path === '/profile' && currentPath.startsWith('/user')) {
        return true;
      }
      
      // 处理首页
      if (item.path === '/' && (currentPath === '/' || currentPath === '/new/home')) {
        return true;
      }
      
      // 处理应用中心
      if (item.path === '/apps') {
        // 财务、资产、物资相关路由视为应用中心激活
        return currentPath === '/apps' || 
          currentPath === '/new/apps' ||
          currentPath.startsWith('/finance') || 
          currentPath.startsWith('/material') || 
          currentPath.startsWith('/asset');
      }
      
      // 处理个人中心
      if (item.path === '/profile') {
        return currentPath.startsWith('/profile') || currentPath === '/new/profile';
      }
      
      // 模块路径匹配（确保只匹配到一级路径）
      if (this.matchPattern && item.path !== '/') {
        // 使用更精确的模式匹配，避免/finance匹配到/finance-other等错误情况
        const pathWithSlash = item.path + '/';
        return currentPath === item.path || currentPath.startsWith(pathWithSlash);
      }
      
      // 精确匹配
      return currentPath === item.path;
    },
    
    // 检测安全区域
    checkSafeArea() {
      const safeAreaSupported = CSS.supports('padding-bottom: env(safe-area-inset-bottom)')
      
      if (safeAreaSupported) {
        // 通过环境变量计算安全区域高度
        const isIPhoneWithNotch = /iPhone/.test(navigator.userAgent) && 
          (window.screen.height >= 812 || window.screen.width >= 812)
        
        this.hasSafeArea = isIPhoneWithNotch
      }
    }
  }
}
</script>

<style scoped>
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background-color: white;
  display: flex;
  box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
  z-index: 100;
  padding-bottom: 0;
}

.has-safe-area {
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #999;
  text-decoration: none;
  transition: color 0.3s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.nav-icon {
  font-size: 20px;
  margin-bottom: 2px;
}

.nav-text {
  font-size: var(--font-size-xs);
  line-height: 1.2;
}

.nav-item.active {
  color: #1890ff;
}

/* 点击效果 */
.nav-item:active {
  opacity: 0.8;
}

/* 适配底部导航的页面内容调整 */
:deep(.has-bottom-nav) {
  padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px));
}
</style> 